<template>
	<header class="header">
		<h1 class="page-name"><router-link to="/">{{name}}</router-link></h1>
		<div class="page-title">{{title}}</div>
		<span class="time date">日期：{{month}}/{{day}}</span>
		<span class="time now">时间：{{hour}}:{{min}}</span>
	</header>
</template>

<script>
export default{
	props:{
		name:{
			type: String,
			default: '轩瑞5G智慧工厂'
		},
		title:{
			type: String,
			default: '轩瑞智慧科技'
		}
	},
	data(){
		return{
			month: '',
			day: '',
			hour: '',
			min: ''
		}
	},
	methods:{
		getTime(){
			const time = new Date(),
						month = time.getMonth()+1,
						day = time.getDate(),
						hour = time.getHours(),
						min = time.getMinutes();
			
			this.month = month < 10 ? '0' + month : month;
			this.day = day < 10 ? '0' + day : day;
			this.hour = hour < 10 ? '0' + hour : hour;
			this.min = min < 10 ? '0' + min : min;
		}
	},
	created() {
		this.getTime();
		setInterval(this.getTime, 5000);
	}
}
</script>

<style lang="less" scoped>
.header{
	position: relative;
	width: 100%;
	height: 12.5vh;
	text-align: center;
	background: url(../../assets/images/bg/topTitle.png);
	background-size: auto 22vh;
	background-position: center top;
	background-repeat: no-repeat;
	color: #fff;
	box-sizing: border-box;
	z-index: 10;
	.page-name{
		padding: 2vh 0;
		line-height: 4vh;
		font-size: 3.8vh;
	}
	.page-title{
		padding-bottom: 2vh;
		line-height: 2vh;
		font-size: 2.2vh;
	}
	.time{
		position: absolute;
		top: 23%;
		font-size: 3vh;
		color: #fff;
		&.date{
			left: 5%;
		}
		&.now{
			right: 5%;
		}
	}
}
</style>
